<template>
	<view class="secondCategory">
		<block v-if="secondCategoryDatas.length > 0">
			<scroll-view class="secondCategory-left" scroll-y="true">
				<view class="secondCategory-body">
					<block v-for="(item, index) in secondCategoryDatas" :key="index">
						<view class="secondCategory-body-name"
							:class="[item.id === selectCategoryId ? 'secondCategory-checked' : '']"
							@click="handleSelectNav(item)">
							{{ item.name }}
						</view>
					</block>
				</view>
			</scroll-view>
			<scroll-view class="secondCategory-right" scroll-y="true">
				<block v-if="selectCategoryImg !=''">
					<view class="secondCategory-right-img">
						<sl-image :value="selectCategoryImg"></sl-image>
					</view>
				</block>
				<ThirdCategory class="ThirdCategory" :categoryDatas="thirdCategoryDatas" @thirdCategory:click="toTargetPage"></ThirdCategory>

			</scroll-view>
		</block>
		<block v-else>
			<sl-nodata nodata="无数据"></sl-nodata>
		</block>
	</view>
</template>

<script>
	import CategoryApi from '@/api/category/category.js';
	import ThirdCategory from '@/pages/category/thirdCategory.vue';
	//分类管理，二级分类
	export default {
		//
		name: 'category',
		//
		components: {
			ThirdCategory
		},
		//
		data() {
			return {
				secondCategoryDatas: [],
				thirdCategoryDatas: [],
				selectCategoryId: '',
				selectCategoryImg: '',
				//正在加载中
				// isLoading: true,
			};
		},
		//
		props: {
			//第一个分类的Id
			firstCategoryId: {
				type: String,
				default: '',
				required: true
			},
			//跳转页面
			targetPage: {
				type: String,
				default: '',
				required: true
			},
			//跳转类型
			type: {
				type: [String, Number],
				default: '1',
				required: true
			}
		},
		watch: {
			//监听是否显示弹出层
			firstCategoryId(newVal, oldValue) {
				if (newVal) {
					this.secondCategoryDatas = [];
					this.thirdCategoryDatas = [];
					this.loadSecondCategory(newVal);
				}
			},
		},
		//
		mounted() {
			//
			this.initSelectNav();
		},
		//
		methods: {
			//初始化左侧导航
			initSelectNav() {
				this.loadSecondCategory(this.firstCategoryId);
			},
			//左侧导航点击事件
			handleSelectNav(item) {
				this.selectCategoryId = item.id;
				this.selectCategoryImg = item.thumbnail;
				//
				this.loadThirdCategory(item.id);
			},
			//加载二级分类
			loadSecondCategory: async function(id) {
				// this.secondCategoryDatas = [];
				// let res = await CategoryApi.query(this.type, 2, id);
				// for (let i = 0; i < res.obj.length; i++) {
				// 	if (i === 0) {
				// 		this.selectCategoryId = res.obj[i].id;
				// 		this.selectCategoryImg = res.obj[i].thumbnail;
				// 		//
				// 		this.loadThirdCategory(this.selectCategoryId);
				// 	}
				// 	//
				// 	this.secondCategoryDatas.push({
				// 		...res.obj[i]
				// 	});
				// }
				this.secondCategoryDatas = [];
				let res = await CategoryApi.query(this.type, 2, id);

				if (res.obj.length > 0) {
					this.selectCategoryId = res.obj[0].id;
					this.selectCategoryImg = res.obj[0].thumbnail;
					this.loadThirdCategory(this.selectCategoryId);
				}

				this.secondCategoryDatas = [...res.obj];
			},
			//加载三级分类
			loadThirdCategory: async function(id) {
				// this.thirdCategoryDatas = [];
				// let res = await CategoryApi.query(this.type, 3, id);
				// for (let i = 0; i < res.obj.length; i++) {
				// 	this.thirdCategoryDatas.push({
				// 		...res.obj[i]
				// 	});
				// }
				this.thirdCategoryDatas = (await CategoryApi.query(this.type, 3, id)).obj.map(item => ({
					...item
				}));
			},
			//跳转到指定页面
			toTargetPage(item) {
				if (this.targetPage) {
					this.$app.navTo(this.targetPage, {
						categoryId: item.id
					});
				} else {
					this.$app.toast('请传入targetPage');
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.secondCategory {
		display: flex;
		flex:1;
		.secondCategory-left {
			width: 150rpx;
			.secondCategory-body {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-content: center;
				text-align: center;
			}

			.secondCategory-body-name {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 24px;
				padding: 30rpx 5rpx;
				font-size: 25rpx;
				align-self: stretch;
				color: #666666;
				background: #F5F5F5;
			}

			.secondCategory-checked {
				background: #fff;
				border-left: 4px solid #F7441D;
			}
		}

		.secondCategory-right {
			flex:1;
			background-color: #fff;
			display: flex;
			.secondCategory-right-img {
				position: relative;
				width: 510rpx;
				height: 104rpx;
				overflow: hidden;
				margin: 12rpx 54rpx;
			}
			.ThirdCategory{
				flex:1;
			}
		}
	}
</style>